<script setup>
import { ref } from 'vue'
import { reactive } from 'vue';
let BlogInnerhtml = [
  {
    id: 1,
    title: '火葫芦救爷爷',
    author: '爷爷',
    content: '火葫芦创业未半中道崩阻'

  },
  {
    id: 2,
    title: '水葫芦救爷爷',
    author: '爷爷',
    content: '水葫芦创业未半中道崩阻'

  },
  {
    id: 3,
    title: '木葫芦救爷爷',
    author: '爷爷',
    content: '木葫芦创业未半中道崩阻'

  },
  {
    id: 4,
    title: '土葫芦救爷爷',
    author: '爷爷',
    content: '土葫芦创业未半中道崩阻'

  },
  {
    id: 5,
    title: '金葫芦救爷爷',
    author: '爷爷',
    content: '金葫芦创业未半中道崩阻'

  }
]

let Context = ref(BlogInnerhtml)

let Blog = ref({
  title: '',
  author: '',
  content: ''
})

let keyWord = ref('')

function search() {


  let result = BlogInnerhtml.filter(item => item.title.includes(keyWord.value.trim()))

  Context.value = result

}
function del(id) {
  const idx = Context.findIndex(item => item.id === id)
  if (confirm('确认要删除吗')) {
    Context.splice(idx, 1)
  }

}
function add() {
  // 生成一个新的 id，这里简单地使用当前数组长度 + 1
  const newId = BlogInnerhtml.length + 1;
  // 将表单中的数据添加到数组中
  BlogInnerhtml.push({
    id: newId,
    title: Blog.value.title,
    author: Blog.value.author,
    content: Blog.value.content
  });
  // 清空表单
  Blog.value.title = '';
  Blog.value.author = '';
  Blog.value.content = '';
}

</script>
<template>
  <h1>葫芦娃救爷爷记</h1>
  <div>
    <form>
      <label><input type="text" placeholder="请输入你要查找的名字" v-model="keyWord"></label><input type="button" value="搜索"
        @click="search()">
    </form>
  </div>
  <form>
    <div>
      <table>
        <tbody>
          <tr>
            <td>名字:</td>
            <td><input type="text" placeholder="请输入名字" v-model="Blog.title"></td>
          </tr>
          <tr>
            <td>作者:</td>
            <td><input type="text" placeholder="请输入作者" v-model="Blog.author"></td>
          </tr>
          <tr>
            <td>内容:</td>
            <td><input type="text" placeholder="请输入内容" v-model="Blog.content"></td>
          </tr>
          <tr>
            <td colspan="2">
              <input type="button" value="新增" @click="add()">
            </td>
          </tr>

        </tbody>
      </table>
    </div>
  </form>
  <div>
    <table>
      <thead>
        <tr>
          <th>标题</th>
          <th>作者</th>
          <th>内容</th>
          <th>操作</th>
        </tr>

      </thead>
      <tbody class="center-text">
        <tr v-for="item in Context" :key="item.id">
          <td>{{ item.title }}</td>
          <td>{{ item.author }}</td>
          <td>{{ item.content }}</td>
          <td><input type="button" value="删除" @click="del(item.id)"></td>
          <td><input type="button" value="修改" @click="updata(item.id)"></td>
        </tr>
      </tbody>
    </table>


  </div>
</template>
<style>
.center-text {
  text-align: center;
}
</style>
